
<template>
    <div class="ma-content-block  p-4">


        <!-- 新增/编辑 -->
        <a-modal :mask-closable="false"  v-model:visible="showAdd" @cancel="showAdd = false" :width="1000" :title='showType == 1?"新增":"编辑"' :on-before-ok="handleOk">
            <div style="display:flex;margin-bottom: 2%;" class="align_center">
                <div class="flex flex_1 align_center" style="margin-right: 12px;">
                    <div>费用类型：</div>
                    <a-select v-model="formData.price_type" style="flex:1" :filter-option="filterOption"  placeholder="请选择费用类型">
                        <a-option v-for="item of chargeTypeList" :value="item.key"   :label="item.title"  />
                    </a-select>
                </div>
                <div class="flex flex_1 align_center" style="margin-right: 12px;">
                    <div>计费重量：</div>
                    <a-select v-model="formData.weight_type" style="flex:1"  placeholder="请选择计费重量">
                        <a-option v-for="item of weightTypeList" :value="item.key" :label="item.title"  />
                    </a-select>
                </div>
                <div class="flex flex_1 align_center" style="margin-right: 12px;">
                    <div>计费节点：</div>
                    <a-select v-model="formData.billing_node" style="flex:1"  placeholder="请选择费用类型">
                        <a-option v-for="item of jifeiArr" :value="item.key" :label="item.title"  />
                    </a-select>
                </div>
                <div class="flex flex_1 align_center">
                    <div>是否默认勾选账单：</div>
                    <a-space direction="vertical" size="large">
                        <a-radio-group v-model="formData.is_checked" :options="checkedTypeArr" />
                    </a-space>
                </div>
            </div>
            <div style="display:flex;margin-bottom: 2%;" class="">
                <div>费用规则：</div>
                <div class="" style="padding-top: 20px;margin-left: 10px;"  v-if="false">
                    <div class="flex align_center" style="margin-bottom: 2%;">
                        <div style="width: 80px;">整车：</div>
                        <div class="flex align_center">
                            <a-input v-model="formData.car.money" style="width: 100px;" placeholder="金额" allow-clear  />
                            <div style="margin: 0 12px;"> 元/ </div>
                            <a-select v-model="formData.car.company" style="width: 100px;" placeholder="单位">
                                <a-option v-for="item of companyList" :value="item.key" :label="item.title"  />
                            </a-select>
                            <div class="flex align_center" style="margin-left: 200px;">
                                <a-checkbox-group v-model="formData.car.flag" :options="flagList" @change="handlechange"></a-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <div class="flex " style="margin-bottom: 2%;">
                        <div style="width: 80px;">集装箱：</div>
                        <div class="flex align_end flex_1">
                            <div>
                                <div class="flex align_center" v-for="(item,index) in formData.box.box" :key="index" style="margin-bottom: 2%;">
                                    <a-select v-model="item.boxType" style="width: 100px;" placeholder="箱型">
                                        <a-option v-for="item of boxTypeList" :value="item.key" :label="item.title"  />
                                    </a-select>
                                    <a-input v-model="item.money" style="width: 100px;margin-left: 12px;" placeholder="金额" allow-clear  />
                                    <div style="margin: 0 12px;"> 元/ </div>
                                    <a-select v-model="item.company" style="width: 100px;" placeholder="单位">
                                        <a-option v-for="items of companyList" :value="items.key" :label="items.title"  />
                                    </a-select>
                                </div>
                            </div>
                            
                            <div class="flex align_center" style="margin-left: 90px;">
                                <a-checkbox-group v-model="formData.box.flag" :options="flagList" @change="handlechange"></a-checkbox-group>
                            </div>
                        </div>
                    </div>
                    <div class="flex align_center" >
                        <div style="width: 80px;">批量快运：</div>
                        <div class="flex align_center">
                            <a-input v-model="formData.piliang.money" style="width: 100px;" placeholder="金额" allow-clear  />
                            <div style="margin: 0 12px;"> 元/ </div>
                            <a-select v-model="formData.piliang.company" style="width: 100px;" placeholder="单位">
                                <a-option v-for="item of companyList" :value="item.key" :label="item.title"  />
                            </a-select>
                            <div class="flex align_center" style="margin-left: 12px;">
                                <div style="margin-right: 12px;">不足</div>
                                <a-input v-model="formData.piliang.min_weight" style="width: 100px;margin-right: 12px;" placeholder="重量" allow-clear  />
                                <div>吨，按此重量作为最低重量计费</div>
                            </div>
                            <div class="flex align_center" style="margin-left: 20px;">
                                <a-checkbox-group v-model="formData.piliang.flag" :options="flagList" @change="handlechange"></a-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="" style="padding-top: 20px;margin-left: 10px;"  v-if="true">
                    <div class="flex align_center" style="margin-bottom: 2%;">
                        <div>发运装车</div>
                        <a-input v-model="formData.delayed.time" style="width: 60px;margin: 0 12px" placeholder="小时" allow-clear  />
                        <div>小时内免费</div>
                    </div>
                    <div class="flex " >
                        <div style="width: 69px;">超时：</div>
                        <div>
                            <div class="flex align_center" style="margin-bottom: 2%;"  v-for="(item,index) in formData.delayed.overtime" :key="index">
                                <a-input v-model="item.stra" style="width: 60px;" placeholder="小时" allow-clear  />
                                <div style="margin: 0 12px;"> - </div>
                                <a-input v-model="item.end" style="width: 60px;" placeholder="小时" allow-clear  />
                                <div style="margin: 0 12px;"> 小时 </div>
                                <a-input v-model="item.money" style="width: 60px;" placeholder="金额" allow-clear  />
                                <div style="margin: 0 12px;"> 元/ </div>
                                <a-select v-model="item.company" style="width: 100px;" placeholder="单位">
                                    <a-option v-for="items of companyList" :value="items.key" :label="items.title"  />
                                </a-select>
                                <a-button type="text" @click="handleDel(index)" v-if="index != 0 ">删 除</a-button>
                            </div>
                            <a-button type="primary" @click="handleAddOvertime">新 增</a-button>
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
  </template>
  
  <script setup>
    import { ref, reactive, computed,onMounted } from 'vue'
    import role from '@/api/system/role'
    import { Message } from '@arco-design/web-vue'
    import { pinyin } from "pinyin-pro"
    import commonApi from "@/api/common";
    const showAdd = ref(true)
    const showType = ref(1)
    const chargeTypeList =  ref([])
    const filterOption = (v,option)=>{
        return option.keywords.some(keywords=>keywords.includes(v))
    }
    const companyList =  ref([
        {key: "1",title: "车"},
        {key: "2",title: "吨"},
        {key: "3",title: "箱"},
        {key: "4",title: "车/天"},
        {key: "5",title: "吨/天"},
        {key: "6",title: "箱/天"},
        {key: "7",title: "车/小时"},
    ])
    const boxTypeList =  ref([
        {key: "1",title: "20英尺"},
        {key: "2",title: "40英尺"},
    ])
    const checkedTypeArr = ref([
        {label:'是',value:'1'},
        {label:'否',value:'0'},
    ])
    const weightTypeList = ref([])
    const jifeiArr = ref([])
    const flagList =  ref([
        {value: "1",label: "按品名装卸费率计算"},
    ])
    const handlechange = (e)=>{
        console.log(formData.value.car)
    }
    const formData = ref({
        price_type:'',
        weight_type:'',
        billing_node:'',
        is_checked:'',
        car:{
            money:'',company:'',flag:[],
        },
        box:{
            box:[
                {
                    boxType:'',
                    money:'',
                    company:'',
                },
                {
                    boxType:'',
                    money:'',
                    company:'',
                    
                },
            ],
            flag:[],
        },
        piliang:{
            money:'',company:'',min_weight:'',flag:[],
        },
        delayed:{   // 延时费类型
            time:'',
            overtime:[{stra:'',end:'',money:'',company:''}],
        }
    })
    const handleAddOvertime = ()=>{
        formData.value.delayed.overtime.push({stra:'',end:'',money:'',company:''})
    }
    const handleDel = (index)=>{
        formData.value.delayed.overtime.splice(index,1)
    }
    onMounted(() => {
        commonApi.getDict("price_type").then((res) => {
            res.data.map((v,i)=>{
                    v.keywords = [
                    v.title,
                    pinyin(v.title,{toneType:'none',pattern:'first'}).split(' ').join(''),
                    pinyin(v.title,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
                    ]
            })
            chargeTypeList.value = res.data;
        });
        commonApi.getDict("weight_type").then((res) => {
            let _data = res.data;
            // _data.map((v,i)=>{
            //     v.value = v.key
            // })
            weightTypeList.value = _data
        });
        commonApi.getDict("billing_node").then((res) => {
            jifeiArr.value = res.data;
        });
    });
   const handleOk = ()=>{
    return true
   }

  </script>
  
  <script>
  export default { name: 'system:costManagement' }
  </script>
  
  <style scoped>
  
  </style>